<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>详情</title>
    <link rel="stylesheet" href="./../css/detail.css" />
  </head>
  <body>
    <div class="top">
      <div class="hn">
        <h1>河南旅游网</h1>
        <p>
          <span class="maijia">成长卖家</span>
          <span class="maijia">满意度9↓</span>
        </p>
      </div>
      <div class="dianhua">
        <p class="dh">4008-197-888转9761</p>
        <p class="xq">星期一-星期日:00:00-23:00</p>
      </div>
    </div>
    <div class="nav">
      <ul>
        <li>首页</li>
        <li>跟团游</li>
        <li>国内游</li>
      </ul>
    </div>
    <div class="banch">
      <p class="ml140">旅游>河南旅游网>郑州出发>洛阳跟团游</p>
      <!-- <div class="ml140 ljs"><img src="./../images/6.jpg" alt="" /></div>
      <div class="gt">
        <p>
          <em>跟团游</em
          ><span
            >老君山+追梦谷2日游 含130元价值钟灵索道 冬季赏雪，网红打卡好去处
          </span>
        </p>
        <p>十里画屏十重天，瑞烟芳草连翠岚。</p>
        <div class="price">
            <p>￥324起/人</p>
        </div>
      </div> -->
    </div>
    <div class="gt"></div>
    <script src="./../js/cart.js"></script>
    <script>
     let oDiv = document.querySelector(".gt");
      //进入商品详情页，能取到用户在列表页里点击的那个商品id，就大功告成了
    //   console.log(location.search);
      let pid = location.search.split("=")[1];
      // console.log(pid);
      let productData = JSON.parse(localStorage.getItem("productData"));
      // console.log(productData);
      let detailData = productData.find((item) => item.id == pid);

      // console.log(detailData);
      oDiv.innerHTML = `
      <div class="ml140 ljs">
      <img src="${detailData.pimg}"></div>
      <p>${detailData.pname}</p>
    
      <div class="price">
          <p>￥${detailData.pprice}</p>
        </div>
         <div class="gw"><span class="jian">-</span><input type="text" value="1" class="val">
        <span class="jia">+</span><input type="button" value="加入购物车" class="btn"></div>
      
      `;
      let jian = document.querySelector(".jian");
      let jia = document.querySelector(".jia");
      let val = document.querySelector(".val");
      let btn = document.querySelector(".btn");

      jian.onclick = function () {
        val.value--;
        if (val.value < 1) {
          val.value = 1;
        }
      };
      jia.onclick = function () {
        val.value++;
        //真的要做限制，只能购买n件，或者库存限制
      };
      val.onblur = function () {
        if (val.value < 1) {
          val.value = 1;
        }
      };

      let cart = new Cart();
      btn.onclick = function () {
        cart.saveData(pid, Number(val.value));
        location.href = "cart.html";
      };
    </script>
  </body>
</html>
